<template>
  <a-drawer
    title="开票"
    placement="right"
    :width="width"
    :closable="true"
    :visible="visible"
    :get-container="false"
    :wrap-style="{ position: 'absolute' }"
    :after-visible-change="afterVisibleChange"
    @close="close"
  >
    <div class="box" title="开票内容">
      <a-form-model
        style="margin: 18px"
        ref="ruleForm"
        :model="record"
        :rules="rules">
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="流水号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="record.invoiceSerial" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="制单日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="record.createTime" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="结算单位" :labelCol="labelCol" :wrapperCol="wrapperCol">

              <a-input v-model="record.settlementCompany" disabled></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="开票币种" :labelCol="labelCol" :wrapperCol="wrapperCol">

              <a-input v-model="record.currency" disabled></a-input>
            </a-form-model-item>
          </a-col>


          <a-col :span="8">
            <a-form-model-item label="发票号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invoiceNumber">

              <a-input v-model="record.invoiceNumber"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="发票类别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invoiceType">
              <j-dict-select-tag v-model="record.invoiceType" placeholder="请选择发票类别" dictCode="kp_type" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="发票属性" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invoiceAttr">
              <j-dict-select-tag v-model="record.invoiceAttr" placeholder="请选择发票属性" dictCode="kp_attribute" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="开票日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invoiceDate">
              <j-date style="width: 100%" v-model="record.invoiceDate"></j-date>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="应开金额" :labelCol="labelCol" :wrapperCol="wrapperCol">

              <a-input v-model="record.amount" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="实开金额" :labelCol="labelCol" :wrapperCol="wrapperCol">

              <a-input v-model="record.actualAmount" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="汇率" :labelCol="labelCol" :wrapperCol="wrapperCol">

              <a-input v-model="record.rate" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="本位币金额" :labelCol="labelCol" :wrapperCol="wrapperCol">

              <a-input v-model="record.cnyAmount" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="开票备注" :labelCol="labelCol1" :wrapperCol="wrapperCol1">

              <a-input v-model="record.remark" type="textarea" :rows="4" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="发票信息" :labelCol="labelCol1" :wrapperCol="wrapperCol1">

              <a-input v-model="record.billInfo" type="textarea" :rows="4" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>

    <a-spin :spinning="confirmLoading">
      <a-card title="费用明细" size="small">
        <div style="margin-top: 15px"></div>
        <j-vxe-table
          ref="receivableTable"
          resizable
          keep-source
          :loading="confirmLoading"
          :height="350"
          :dataSource="receivableList"
          :columns="receiveCol"
          style="margin-top: 8px;"
          @selectRowChange="handleSelectRowChange"
          :cell-style='cellStyle'
          bordered
        >
        </j-vxe-table>
      </a-card>
    </a-spin>
    <div style="margin-top: 30px"></div>
    <div
      :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'left',
          zIndex: 999,
        }"
    >
      <a-button type="primary" @click="sumbit" icon="check">
        确定开票
      </a-button>
      <a-button :style="{ marginLeft: '8px' }" @click="close" icon="close">
        关闭
      </a-button>

    </div>
  </a-drawer>
</template>

<script>
import BillForm from '@/views/jzxtrade/modules/BillForm'
import { httpAction, getAction } from '@/api/manage'
import { ajaxGetDictItems } from '@api/api'
import pick from 'lodash.pick'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'
import JDate from '@/components/jeecg/JDate'
import moment from 'moment'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import Vue from 'vue'
import { getDictItems } from '../../components/dict/JDictSelectUtil'
import { getDictItemsFromCache } from '../../api/api'
import { deleteAction, postAction } from '../../api/manage'

export default {

  name: 'ExpenseEntrySh',
  components: {
    JFormContainer,
    BillForm,
    JDate,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    }
  },
  props: {},
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      labelCol1: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol1: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      width: '95%',
      Allfee: '1800',
      visible: true,
      selectedRowKeys: [],
      isdelete: false,
      receivableList: [],
      confirmLoading: false,
      modelId: '',
      record: {},
      receiveCol: [
        {
          title: '费用状态',
          key: 'status',
          type: JVXETypes.normal,
          width: '200px',
          defaultValue: '录入状态'
        },
        {
          title: '费用名称',
          key: 'costName',
          type: JVXETypes.normal,
          width: '200px',
          align: 'center'
        },
        {
          title: '结算单位',
          key: 'settlementCompany',
          type: JVXETypes.normal,
          slotName: 'jsdw',
          width: '220px'
        },
        {
          title: '计费单位',
          key: 'chargingUnit',
          type: JVXETypes.normal,
          width: '180px'
        },

        {
          title: '币种',
          key: 'currency',
          type: JVXETypes.normal,
          width: '180px'
        },

        {
          title: '单价',
          key: 'price',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '数量',
          key: 'num',
          type: JVXETypes.normal,
          width: '180px'

        },
        {
          title: '汇率',
          key: 'rate',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '总价',
          key: 'totalPrice',
          type: JVXETypes.normal,
          width: '180px',
          defaultValue: '0'
          // statistics: ['sum']
        },
        // {
        //   title: '账单号',
        //   key: 'billNumber',
        //   type: JVXETypes.normal,
        //   width: '200px'
        // },
        {
          title: '发票号',
          key: 'invoiceNumber',
          type: JVXETypes.normal,
          width: '200px'
        },
        {
          title: '备注',
          key: 'remark',
          type: JVXETypes.normal,
          width: '200px'
        }
      ],
      rules: {
        invoiceNumber: [{ required: true, message: '请填写发票号', trigger: 'change' }],
        invoiceType: [{ required: true, message: '请选择发票类别', trigger: 'change' }],
        invoiceAttr: [{ required: true, message: '请选择发票属性', trigger: 'change' }],
        invoiceDate: [{ required: true, message: '请选择开票日期', trigger: 'change' }]
      },
      url: {
        save: '/box.ship/shipInfo/cost/add',
        queryById: '/box.ship/shipInfo/cost/queryByShipId',

        deleteurl: '/box.ship/shipInfo/cost/del',
        submiturl: '/invoice/bill',
        selecturl: '/invoice/query/costinfo'
      },
      receiveCellEdit: true,
      // 选择的行
      selectedRows: []
    }
  },
  computed: {},
  created() {
  },
  beforeCreate() {
    // this.form = this.$form.createForm(this, { name: 'dynamic_form_item' });
    // this.form.getFieldDecorator('boxType', { initialValue: [], preserve: true });

    // this.form.getFieldDecorator('keys', { initialValue: [], preserve: true });
  },
  methods: {
    requestRecord(val) {
      this.record = val
      this.record.invoiceDate = this.addDate()
      console.log(this.record)
      this.selectlist()
    },
    //获取当前年月日
    addDate() {
      const nowDate = new Date()
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate()
      }
      const newmonth = date.month > 10 ? date.month : '0' + date.month
      const day = date.date > 10 ? date.date : '0' + date.date
      return date.year + '-' + newmonth + '-' + day

    },
    selectlist() {
      let param = { id: this.record.id }
      getAction(this.url.selecturl, param).then(res => {
        console.log(res)
        if (res.success) {
          this.receivableList = res.result
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
      })
    },
    // 当选择的行变化时触发的事件
    handleSelectRowChange(event) {
      this.selectedRows = event.selectedRows
    },

    cellStyle(row) {
      // console.log(row.row);
      if (row.row.scode == 2) {//判断条件，如果想要改变其他行样式，就写那一行的下标
        return `background-color: #fff1cf !important;color: #777777`
      } else {
        return `color: #777777`
      }
    },
    afterVisibleChange(val) {
      console.log('expenseVisible', val)
    },
    sumbit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          postAction(this.url.submiturl, this.record).then(res => {
            console.log(res)
            if (res.success) {
              this.$message.success(res.message)
              this.close()
            } else {
              this.$message.warning(res.message)
            }
          }).finally(() => {

          })
        } else {

          return false
        }
      })
    },
    close() {
      console.log('close')
      this.$emit('close')
      // this.visible = false
    }
  }
}

</script>

<style scoped>
/deep/ .ant-form-item {
  margin-bottom: 0px;
}
/deep/ .ant-card-body {
  padding: 7px;
  zoom: 1;
}

/deep/ .ant-drawer-body {
  padding: 10px;
}
.box {
  position: relative;
  border: 1px solid #e8e8e8;
}

.box::before {
  content: attr(title);
  position: absolute;
  left: 5%;
  transform: translateX(-50%);
  -webkit-transform: translate(-50%, -50%);
  padding: 0 10px;
  background-color: #fff;
}
</style>